<template>
  <el-dialog
    :close-on-click-modal="false"
    :show-close="false"
    title="运营审核"
    :visible.sync="isOperate"
  >
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="operate"
      label-width="120px"
      size="small"
      class="form-box table-data"
    >
      <div class="user-info-item">
        <span>提现序号：</span>
        <span>{{form.settle_sn}}</span>
      </div>
      <div class="user-info-item">
        <span>提现商户：</span>
        <span>{{form.shop_name}}</span>
      </div>
      <div class="user-info-item">
        <span>提现金额：</span>
        <span>{{form.amount}}</span>
      </div>
      <div class="user-info-item">
        <span>费率扣除后金额：</span>
        <span>{{form.amount}} - {{(form.rate * form.amount).toFixed(2)}}  = {{(form.amount - (form.rate * form.amount).toFixed(2)).toFixed(2)}} 元</span>
      </div>
      <div class="user-info-item">
        <span>实际结算金额：</span>
        <span>{{form.real_amount}}</span>
      </div>
      <div class="user-info-item">
        <span>申请提现时间：</span>
        <span>{{form.create_time}}</span>
      </div>
       <div class="user-info-item">
        <span>提现银行账号：</span>
        <span>{{form.bank_num}}</span>
      </div>
      <div class="user-info-item">
        <span>持卡人姓名：</span>
        <span>{{form.member}}</span>
      </div>
      <el-form-item label="审核意见" prop="remark">
        <el-input type="text" v-model="operate.remark" placeholder=""></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="submitFormClose" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm',1)" type="primary" size="small">通过</el-button>
      <el-button type="danger" @click="submitFormAdd('ruleForm',0)" size="small">拒绝</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import settlementApi from "@/api/settlement"
@Component({
  components: {}
})
export default class OperateDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  check:boolean = true//防重复提交
  @Prop(Boolean) isOperate!: boolean;
  @Provide() dateTime: any = [];
  @Prop(Object) form!: {
    id:number,
   };
  @Provide() operate:{
    remark: any,
    id:any,
    status:number,
  }={
    remark:"",
    id:"",
    status:0
  }
  @Provide() rules: any = {
    remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
  }
  // 提交
  submitFormAdd(formName: any,i) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {
          this.operate.id=this.form.id
          if(i==0){
            this.operate.status=0
          }else{
            this.operate.status=1
          }
          if(this.check) {
            let _this = this
            _this.check = false
            settlementApi.busSettOperate(_this.operate)
            .then((res: any) => {
              if(res.data.status){
                _this.$message({
                  message: '操作成功',
                  type: "success"
                });
                _this.operate.remark=''
                _this.$emit("closeDialog");
                setTimeout(function(){
                  _this.check = false
                },3000)
              }else{
                _this.$message({
                  message: res.data.msg,
                  type: "error"
                });
                _this.check = false
              }
            });
          }
          
      }
    })
  }
  submitFormClose() {
    this.operate.remark=''
    this.$emit("closeDialog");
  }
  created() {
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
}
</style>
